import React, { memo, useEffect, useState } from 'react'

import style from './sty.module.css'

import NavBar from '@/components/NavBar'
import HeaderInfo from '@/components/HeaderInfo'
import Content from './child/content'
import { reqPlayList } from '../../api/sheet'


const Detail = (props) => {
    console.log(props);
    const id = props.match.params.id
    const [detail, setDetail] = useState({})
    useEffect(() => {
        getDetail(id)
    }, [id])

    const getDetail = async (id) => {

        const res = await reqPlayList(id)
        setDetail(res.playlist)
    }

    return (
        <div className={style.container}>
            <div>
                <NavBar>{detail.name}</NavBar>
                <HeaderInfo info={detail} />
                <Content info={detail} />
            </div>
        </div>
    )
}


export default memo(Detail)